<template>
  <div class="py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="视频" class="mb-24">
      <VideoMaterialSelector :video-url.sync="config.videoUrl" :cover-url.sync="config.coverUrl" :height="82" />
    </el-form-item>
    <el-form-item label="视频封面" class="mb-24">
      <PictureMaterialSelector :img-url.sync="config.imgSrc" :height="82">
        <template #tip>
          <div class="mb-6">尺寸为150*102</div>
          <div>大小不超过2M</div>
        </template>
      </PictureMaterialSelector>
    </el-form-item>
    <BorderSetting v-model="model" class="mb-24" />
    <JumpSetting v-model="config" />
  </div>
</template>

<script>
  import { getHexColor } from '@/utils';
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import VideoMaterialSelector from '@/components/VideoMaterialSelector';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';

  export default {
    components: {
      PictureMaterialSelector,
      VideoMaterialSelector,
      BorderSetting,
      JumpSetting
    },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {
        activeIndex: 0
      };
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    },

    methods: {
      getHexColor
    }
  };
</script>

<style lang="scss" scoped></style>
